import React from 'react'
import { Form, Input, Button } from 'antd'
import { userLogin, getUserInfo } from '../../api/user'
import './login.css'
import Routes from '../../router/routes'
import { filterRoutes } from '../../utils/filterRouter'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

// 后端管理系统登录流程
// 1.验证账号和密码
// 2.获取用户信息  (主要是拿到身份信息)
// 3.根据用户信息区分视图

// token  根据用户信息 jsonwebtoken(jwt) 



function Login({ dispatch, history }) {
    const onFinish = (values) => {
        userLogin(values).then(res => {
            sessionStorage.setItem('token', res.data.token)
            // 获取用户信息
            getUserInfo().then(res => {
                let user_status = res.data.data.identity_text
                let user_id = res.data.data.user_id
                sessionStorage.setItem("user_id", user_id)
                dispatch({ type: "SET_LIST", list: filterRoutes(Routes[0].children, user_status) })
                // 跳转
                history.push('/home')
                // sessionStorage.setItem('user_status', user_status)
            })
        })

        // axios.post("/user/login", values).then(res => {
        //     sessionStorage.setItem('token', res.data.token)
        //     // console.log(res.data.token)
        //     // 获取用户信息
        //     axios.get("/user/userInfo").then(res => {
        //         console.log(res)
        //     })
        // })
        // http://localhost:7001/user/login
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }


    return (
        <div className="h100 login">
            <div className="login_login-wraper">
                <Form
                    // name="basic"
                    wrapperCol={{
                        span: 24,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        name="user_name"
                        // 规则
                        rules={[
                            {
                                // 是否必传
                                required: true,
                                // 提示信息
                                message: '请输入你的用户名!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="user_pwd"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的密码!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item>
                        <Button className="w100" type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

const mapStateToProps = (state) => {
    const { list } = state
    return {
        list
    }
}

export default withRouter(connect(mapStateToProps)(Login))
